import {messages} from "share/common";
/**
 * Created by 13576 on 2017/11/25.
 */
import React from 'react';
import {connect} from 'react-redux';

import {Button,Form,Switch, Input,message, Icon,Select} from 'antd';
const FormItem = Form.Item;
const Option =Select.Option;
import paymentMethodService from 'containers/pay-setting/payment-method/payment-method.service'
import 'styles/pay-setting/payment-method/new-payment-method.scss'

class NewPaymentMethod extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      params: {},
      isEnabled: true,
      isPut: false,
      loading: false,
      paymentMethodCategoryOptions:[],
      searchFrom:[
        {id:"isEnabled"},
        {id:"paymentMethodCategory"},
        {id:"paymentMethodCode"},
        {id:"description"}
      ]
    };
  }

  componentWillReceiveProps(nextProps){
    if(this.props.params.timestamp != nextProps.params.timestamp) {
      this.props.form.resetFields();
    }
    this.setState({paymentMethodCategoryOptions:nextProps.mappingList});
  }



  //新建或者修改
  handleSave = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({loading: true});
        if (JSON.stringify(this.props.params.updateParams) === "{}") {
          let toValue = {
            id: "",
            versionNumber: 1,
            ...this.props.params.updateParams,
            ...values,
          }
          paymentMethodService.addOrUpDataPaymentType(toValue).then((res) => {
            this.setState({loading: false});
            this.props.form.resetFields();
            this.props.close(true);
            message.success(messages('common.operate.success'));
          }).catch((e) => {
            this.setState({loading: false});

            message.error(messages('common.save.filed')+`${e.response.data.message}`);
          })
        }else {
          let toValue ={
            ...this.props.params.updateParams,
            ...values,
          }
          paymentMethodService.addOrUpDataPaymentType(toValue).then((res) => {
            this.setState({loading: false});
            this.props.form.resetFields();
            this.props.close(true);
            message.success(messages('common.operate.success'));
          }).catch((e) => {
            this.setState({loading: false});
            message.error(messages('common.save.filed')+`${e.response.data.message}`);
          })

        }
      }
    });
  }

  onCancel = () => {
    this.props.close();
  };

  switchChange = (value) => {
   this.setState({isEnabled:value})
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const {params, isEnabled, isPut} = this.state;
    const formItemLayout = {
      labelCol: {span: 6, offset: 1},
      wrapperCol: {span: 14, offset: 1},
    };
    return (
      <div className="new-payment-method">
        <Form onSubmit={this.handleSave}>
          <FormItem {...formItemLayout}
                    label={messages('pay-setting.key58'/*状态*/)}>
            {getFieldDecorator('isEnabled', {
              valuePropName: 'checked',
              initialValue: JSON.stringify(this.props.params.updateParams) === "{}"?true:this.props.params.updateParams.isEnabled
            })(
                <Switch  checkedChildren={<Icon type="check"/>}
                        unCheckedChildren={<Icon type="cross" />}
                        onChange={this.switchChange}
                />
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('pay-setting.key59'/*付款方式类型*/)}>
            {getFieldDecorator('paymentMethodCategory', {
              rules: [{
                required: true,
                message: messages('common.please.enter')
              }],
              initialValue:this.props.params.updateParams.paymentMethodCategory||''
            })(
              <Select disabled={JSON.stringify(this.props.params.updateParams) === "{}"?false:true} placeholder={messages('common.please.select')}>
                {this.state.paymentMethodCategoryOptions.map((option)=>{
                  return <Option value={option.value} key={option.label} >{option.label}</Option>
                })}
              </Select>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('pay-setting.key60'/*付款方式代码*/)}>
            {getFieldDecorator('paymentMethodCode', {
              rules: [{
                required: true,
                message: messages('common.please.enter')
              }],
              initialValue:this.props.params.updateParams.paymentMethodCode||''
            })(
              <Input placeholder={messages('common.please.enter')} disabled={JSON.stringify(this.props.params.updateParams) === "{}"?false:true}/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label={messages('pay-setting.key61'/*付款方式名称*/)}>
            {getFieldDecorator('description', {
              rules: [{
                required: true,
                message: messages('common.please.enter')
              }],
              initialValue:this.props.params.updateParams.description||''
            })(
              <Input placeholder={messages('common.please.enter')}/>
            )}
          </FormItem>

          <div className="slide-footer">
            <Button type="primary" htmlType="submit"
                    loading={this.state.loading}>{messages('common.save')}</Button>
            <Button onClick={this.onCancel}>{messages('common.cancel')}</Button>
          </div>
        </Form>
      </div>
    )
  }
}



const WrappedPaymentMethod = Form.create()(NewPaymentMethod);
function mapStateToProps() {
  return {

  }
}
export default connect(mapStateToProps)(WrappedPaymentMethod);
